<!DOCTYPE html>
<html>
<head>
    <style>
        .array-container {
            display: flex;
            align-items: flex-end;
            height: 300px;
            padding: 20px;
            gap: 2px;
        }
        .array-bar {
            width: 30px;
            background-color: #90CAF9;
            transition: height 0.5s;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
            font-size: 12px;
            color: #333;
        }
    </style>
</head>
<body style="background: #f0f0f0; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div class="array-container">
        <div class="array-bar" style="height: 30px;">3</div>
        <div class="array-bar" style="height: 220px;">44</div>
        <div class="array-bar" style="height: 190px;">38</div>
        <div class="array-bar" style="height: 25px;">5</div>
        <div class="array-bar" style="height: 235px;">47</div>
        <div class="array-bar" style="height: 75px;">15</div>
        <div class="array-bar" style="height: 180px;">36</div>
        <div class="array-bar" style="height: 130px;">26</div>
        <div class="array-bar" style="height: 135px;">27</div>
        <div class="array-bar" style="height: 10px;">2</div>
        <div class="array-bar" style="height: 230px;">46</div>
        <div class="array-bar" style="height: 20px;">4</div>
        <div class="array-bar" style="height: 95px;">19</div>
        <div class="array-bar" style="height: 250px;">50</div>
        <div class="array-bar" style="height: 240px;">48</div>
    </div>
    <script>
        const bars = document.querySelectorAll('.array-bar');
        let values = Array.from(bars).map(bar => parseInt(bar.textContent));
        
        async function bubbleSort() {
            for(let i = 0; i < values.length; i++) {
                for(let j = 0; j < values.length - i - 1; j++) {
                    bars[j].style.backgroundColor = '#FF9800';
                    bars[j+1].style.backgroundColor = '#FF9800';
                    
                    await new Promise(resolve => setTimeout(resolve, 500));
                    
                    if(values[j] > values[j+1]) {
                        // 交换值
                        [values[j], values[j+1]] = [values[j+1], values[j]];
                        // 交换高度
                        [bars[j].style.height, bars[j+1].style.height] = 
                        [bars[j+1].style.height, bars[j].style.height];
                        // 交换显示的数字
                        [bars[j].textContent, bars[j+1].textContent] = 
                        [bars[j+1].textContent, bars[j].textContent];
                    }
                    
                    bars[j].style.backgroundColor = '#90CAF9';
                    bars[j+1].style.backgroundColor = '#90CAF9';
                }
                bars[bars.length - i - 1].style.backgroundColor = '#4CAF50';
            }
        }

        setTimeout(bubbleSort, 1000);
        setInterval(() => {
            // 重置颜色和位置
            values = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
            bars.forEach((bar, index) => {
                bar.style.backgroundColor = '#90CAF9';
                bar.style.height = `${values[index] * 5}px`;
                bar.textContent = values[index];
            });
            bubbleSort();
        }, 15000); // 每15秒重新开始
    </script>
</body>
</html> 